<template>
    <div class="box">
        <!-- 头部导航 -->
        <Nav></Nav>
        <!-- 网易严选图标 -->
        <img src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" >
        <!-- 登录表单 -->
        <van-form @submit="onSubmit" class="from">
      <van-field v-model="username" name="用户名" placeholder="邮箱账号" :rules="[{ required: true, message: '请输入手机号' }]" />
      <van-field v-model="password" type="password" name="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      <!-- 两句话 -->
      <div class="two">
        <div @click="goRegister">注册账号</div>
        <div>忘记密码</div>
      </div>
      <div style="margin: 16px">
        <van-button block type="danger" native-type="submit">登录 </van-button>
      </div>
        </van-form>
        <!-- 其他登陆方式 -->
        <div class="else">其他登陆方式></div>
    </div>
</template>

<script>
// 引入头部导航组件
import Nav from '@/components/nav/index.vue';
import Vue from 'vue';

import { Form, Field, Checkbox, CheckboxGroup } from 'vant';

Vue.use(Form);
Vue.use(Field);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);

export default {
    name: 'EmailLogin',
    components: {
        Nav
    },
    data() {
        return {
            username: '',
            password: '',
            checkbox: false,
            checkboxGroup: [],

        };
    },
    methods: {
        onSubmit(values) {
            console.log('submit', values);
        },
        goRegister(){
            this.$router.replace('/register')
        }

    },

}
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    img {
        display: block;
        width: 134px;
        height: 45px;
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 80px;
    }

  .from {
    .two {
      display: flex;
      justify-content: space-between;
      width: 90%;
      margin: 0 auto;

      div {
        font-size: 15px;
        color: #7f7f7f;
      }
    }
  }

  .else {
    font-size: 14px;
    width: 100%;
    text-align: center;
    margin-top: 70px;
  }
}
</style>
